<template>
  <el-table
    v-loading="props.loading"
    :data="props.steps"
    border
    style="width: 100%"
  >
    <el-table-column prop="id" label="编号" width="60" />
    <el-table-column
      label="步骤"
      align="center"
      prop="step"
      :show-overflow-tooltip="true"
    >
      <template #default="scope">
        <el-input v-model="scope.row.step" type="textarea" :rows="1" />
      </template>
    </el-table-column>
    <el-table-column
      label="预期"
      align="center"
      prop="exp"
      :show-overflow-tooltip="true"
    >
      <template #default="scope">
        <el-input v-model="scope.row.exp" type="textarea" :rows="1" />
      </template>
    </el-table-column>
    <el-table-column
      v-if="['2'].includes(props.type)"
      label="样本数据"
      align="center"
      prop="pcap"
      :show-overflow-tooltip="true"
    >
      <template #default="scope">
        <el-input v-model="scope.row.pcap" type="textarea" :rows="1" />
      </template>
    </el-table-column>
    <el-table-column
      v-if="['2'].includes(props.type)"
      label="样本规则"
      align="center"
      prop="rule"
      :show-overflow-tooltip="true"
    >
      <template #default="scope">
        <el-input v-model="scope.row.rule" type="textarea" :rows="1" />
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" align="center" width="120">
      <template #default="scope">
        <el-tooltip
          v-if="['2'].includes(props.type)"
          :content="
            scope.row.binding ? JSON.stringify(scope.row.binding) : '未绑定'
          "
          placement="top"
        >
          <el-button link type="primary" @click="handleStepBinding(scope.row)">
            <el-icon v-if="scope.row.binding">
              <Connection />
            </el-icon>
            <el-icon v-else>
              <MagicStick />
            </el-icon>
          </el-button>
        </el-tooltip>
        <el-tooltip content="添加" placement="top">
          <el-button
            link
            type="primary"
            icon="Plus"
            @click="handleStepAdd(scope.row)"
          ></el-button>
        </el-tooltip>
        <el-tooltip content="删除" placement="top">
          <el-button
            link
            type="primary"
            icon="Minus"
            @click="handleStepDel(scope.row)"
          >
          </el-button>
        </el-tooltip>
      </template>
    </el-table-column>
    <!-- 步骤编辑对话框 -->
    <step-binding
      ref="stepBindingRef"
      :id="id"
      v-model="open"
      :title="title"
      :type="props.type"
      @submited="submited"
      @close="open = false"
    />
  </el-table>
  <el-button
    icon="ArrowDownBold"
    class="mt-4"
    style="width: 100%"
    @click="handleAddStep"
    >添加步骤</el-button
  >
</template>

<script setup name="Steps">
import StepBinding from "./StepBinding";

const { proxy } = getCurrentInstance();

const id = ref(1);
const open = ref(false);
const title = ref("");

const props = defineProps({
  steps: {},
  type: undefined,
  module: undefined,
  loading: false,
});

/** 步骤详细对话框事件 */
function handleStepBinding(row) {
  id.value = row.id;
  open.value = true;
  title.value = "绑定资源";
}

/** 添加测试用例步骤 */
function handleStepAdd(row) {
  const step = {
    id: row.id + 1,
    step: "",
    exp: "",
  };
  props.steps.splice(row.id, 0, step);
  props.steps.map(comfortList);
}

/** 添加测试用例步骤 */
function handleAddStep() {
  const step = {
    id: props.steps.length + 1,
    step: "",
    exp: "",
  };
  props.steps.push(step);
}

/** 添加测试用例步骤 */
function handleStepUpdate(row) {
  props.steps[row.id - 1].binding = row.binding;
}

/** 删除测试用例步骤 */
function handleStepDel(row) {
  props.steps.splice(row.id - 1, 1);
  props.steps.map(comfortList);
}

/** 序列化列表中Id字段 */
function comfortList(v, i, a) {
  v.id = i + 1;
}

/** 添加/修改对象后触发事件 */
function submited() {
  handleStepUpdate(proxy.$refs.stepBindingRef.step);
}
</script>
